<template>
    <!-- 设置内容 -->
    <div class="setting_body">
        <template v-if="!loading">
            <div class="user_info">
                <div class="user_info_top">
                    <img class="avatar" :src="avatar" alt="" />
                    <div class="content">
                        <div>{{user_name}}</div>
                        <div>{{user_phone}}</div>
                    </div>
                </div>
                <div class="user_info_bottom">
                    <div class="bottom_item">
                        <span class="colorRgba00085Blod">用户身份：</span>
                        <span>{{user_identity}}</span>
                    </div>
                    <div class="bottom_item">
                        <span class="colorRgba00085Blod">微信号：</span>
                        <span>{{weixin_id}}</span>
                    </div>
                </div>
            </div>
            <div class="button_content">
                <el-button type="primary">修改信息</el-button>
                <el-button>修改密码</el-button>
            </div>
        </template>
        <template v-else>
            <el-skeleton :rows="4" animated />
        </template>
    </div>
</template>
<script>
    import { getInfo } from '@/api/accountSetting'
    export default {
        components: {},
        data() {
            return {
                user_name: "",
                user_phone: "",
                user_identity: "",
                weixin_id:"",
                loading: true,
                avatar:"",
            }
        },
        created() {
            this.getInfo();
        },
        methods: {
            async getInfo() {
                const { code, data } = await getInfo()
                // console.log(data)
                if(code == 200) {
                    let that = this
                    that.user_name = data.user_name
                    that.user_phone = data.user_phone
                    that.user_identity = data.user_identity
                    that.weixin_id = data.weixin_id
                    that.avatar = data.avatar
                    
                    setTimeout(function() {
                        that.loading = false
                    },300);
                }
            },
        },
    }
</script>

<style lang="scss" scoped>

/* 个人设置 */
.personal_setting{
    padding:0 32px;
}

/* 个人设置头部标题 */
.setting_title{
    padding: 16px 24px;
    padding-left: 0;
    border-radius:2px 2px 0px 0px;
}

.setting_title span{
    font-size: 16px;
    color:rgba(0,0,0,0.85);
    font-weight:600;
}

/* 设置内容 */
.setting_body{
    box-shadow:0px -1px 0px 0px rgba(217,217,217,1);
    padding: 24px 24px 32px;
    background: #FFFFFF;
}

/* 输入框 */
.input_content{
    display: flex;
}

.setting_input{
    display: flex;
    align-items: center;    
}

.setting_input input{
    width: 276px;
    margin-right: 13px;
}

.input_title{
    width: 96px;
    text-align: right;
}

/* 按钮 */
.button_content{
    margin-top: 24px;
}

.button_content button{
    margin-right: 12px;
}

.user_info_top{
    display: flex;
    align-items: center;
    color:rgba(0,0,0,0.85);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.user_info_top img{
    width: 48px;
    height: 48px;
    background: rgba(0,0,0,0.25);
    margin-right: 16px;
    border-radius: 50%;
}

.user_info_top .content{
    line-height:24px;
}

.user_info_bottom{
    display: flex;
    align-items: center;
}

.bottom_item{
    width: 300px;
}

.setting_body >>> .ant-skeleton-header .ant-skeleton-avatar-lg{
    width: 48px;
    height: 48px;
}

.colorRgba00085Blod {
    color: rgba(0, 0, 0, .85)!important;
    font-weight: 600;
}

</style>